<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p></p>
  <button>按钮</button>
  <script>
    // 本地存储 可以做数据的持久化存储,但是本地存储的数据不是响应式的
    // vuex中存储的数据是响应式的 

    // vue项目 token往哪里存储的呢? 
    // 本地存储(数据的持久化)+vuex存储(数据的响应式)

    // token是会过期的，目前接触的项目是单token, 双token技术

    // 登录成功后会返回两个token(token+refresh_token), 发送请求期间一直携带的就是token,但是
    // token会过期, token过期后,可以使用refresh_token向服务器请求会来一份新token,直接存储到vuex,
    // 用户是无感知的

    localStorage.setItem('key', 'abc')
    const p = document.querySelector('p')
    p.innerHTML = localStorage.getItem('key')



    document.querySelector('button').addEventListener('click',()=>{
      localStorage.setItem('key', 'xyz')
      p.innerHTML = localStorage.getItem('key')
    })
  </script>
</body>
</html>